{% assign sorted_tests_istio = site.compatibility | sort: "timestamp" | reverse | where: "meshery-component",{{include.service-mesh}} %}

<table id="test-table" class="tablesorter">
  <thead>
    <th style="text-align: center">Status <span class="sort-by"> </span></th>
    <th style="text-align: center"><span class="sort-by"> Meshery Component </span></th>
    <th style="text-align: center"><span class="sort-by"> Meshery Component Version </span></th>
    <th style="text-align: center"><span class="sort-by"> Meshery Server Version </span></th>
    <th style="text-align: center"><span class="sort-by"> Service Mesh </span></th>
    <th style="text-align: center"><span class="sort-by"> Service Mesh Version </span></th>
  </thead>
  <tbody>
    {% for item in sorted_tests_istio %}
      {% if item.overall-status == "passing" %}
        {% assign overall-status = "background-color: #56b257; color: white;" %}
        {% assign result-state = "/assets/img/passing.svg" %}
      {% elsif item.overall-status == "partial" %}
        {% assign overall-status = "background-color: #EBC017; color: white;" %}
        {% assign result-state = "/assets/img/YellowCheck.svg" %}
      {% elsif item.overall-status == "failing" %}
        {% assign overall-status = "background-color: #B32700; color: white;" %}
        {% assign result-state = "/assets/img/failing.svg" %}
      {% else %}
        {% assign overall-status = "" %}
      {% endif %}
      
      {% if item.meshery-component-version == "edge" %}
        <tr style="visibility: hidden; display: none; background-color: white" class="test-details edge edge_visible" onclick="toggle_visibility('{{item.timestamp}}');">
      {% else %}
        <tr style="visibility: hidden; display: none; background-color: white" class="test-details stable stable_visible" onclick="toggle_visibility('{{item.timestamp}}');">
      {% endif %}
      
      <td id="timestamp" style="{{overall-status}}">{{ item.timestamp }}</td>
      <td>
        <a href="{{ site.repo }}-{{ item.service-mesh }}">{{ item.meshery-component }}</a>
      </td>
      
      {% if item.meshery-component-version == "edge" %}
        <td>
          <a href="{{ site.repo }}-{{ item.service-mesh }}/releases">{{ item.meshery-component-version }}</a>
        </td>
      {% else %}
        <td>
          <a href="{{ site.repo }}-{{ item.service-mesh }}/releases/tag/{{ item.meshery-component-version }}">{{ item.meshery-component-version }}</a>
        </td>
      {% endif %}
      
      {% if item.meshery-server-version == "edge" %}
        <td>
          <a href="{{ site.repo }}/releases{{ item.meshery-server-version }}">{{ item.meshery-server-version }}</a>
        </td>
      {% else %}
        <td>
          <a href="{{ site.repo }}/releases/tag/{{ item.meshery-server-version }}">{{ item.meshery-server-version }}</a>
        </td>
      {% endif %}
      
      <td>
        <img style="height: 1.5rem; vertical-align: text-bottom" src="{{site.baseurl}}/assets/img/service-meshes/{{item.service-mesh | downcase }}.svg" />&nbsp;
        <a href="{{ site.baseurl }}/service-meshes/adapters/{{ item.service-mesh }}">{{ item.service-mesh }}</a>
      </td>
      
      <td>{{ item.service-mesh-version }}</td>
    </tr>
    
    <tr class="hidden-details" id="{{item.timestamp}}" style="visibility: hidden; display: none">
      <td colspan="2" class="details">
        <i>Platform:</i>
        <li>
          <img style="height: 1rem; vertical-align: text-bottom" src="{{site.baseurl}}/assets/img/kubernetes-icon-color.svg" />
          {{item.k8s-distro}} {{item.k8s-version}}
        </li>
      </td>
      
      <td colspan="4" class="details">
        <i>Test results:</i>
        <table style="border: 0">
          {% for test in item.tests %}
            <tr>
              <td><img style="height: 24px; width: 24px" src="{{result-state}}" /></td>
              <td>{{test[0]}}</td>
            </tr>
          {% endfor %}
        </table>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>

<script type="text/javascript">
  $(function ($) {
    console.log("sorting table");
    $("#test-table").tablesorter({
      cssChildRow: "hidden-details",
    });
  });
</script>
